<template>
	<view class="pb-30">
		<image class="fixed top-0 index--1" style="width: 750rpx; height: 634rpx" src="/static/login-bg.png"></image>
		<uv-navbar :fixed="false" bgColor="transparent" title="登录">
			<view slot="left">
				<nav-left></nav-left>
			</view>
		</uv-navbar>

		<image class="logo-image mt-30 block mx-auto" src="/static/login-logo.png"></image>

		<view class="list-container">
			<view class="list-item fs-32 flex-column flex-center">
				<view>账号</view>
				<view class="input-wrap">
					<uv-input border="none" placeholder="请输入您的账号" placeholderStyle="#C7C7C7" fontSize="32rpx"
						v-model="username"></uv-input>
				</view>
			</view>
			<view class="list-item fs-32 flex-column flex-center">
				<view>密码</view>
				<view class="input-wrap">
					<uv-input border="none" placeholder="请输入您的密码" placeholderStyle="#C7C7C7" fontSize="32rpx"
						type="password" v-model="password"></uv-input>
				</view>
			</view>
			<view class="list-item fs-32 flex-column flex-center" v-if="captchaEnabled">
				<view>验证码</view>
				<view class="input-wrap flex--center">
					<uv-input border="none" placeholder="请输入验证码" placeholderStyle="#C7C7C7" fontSize="32rpx"
						v-model="code"></uv-input>
					<image class="captcha-image" :src="captchaUrl" @click="handleGetCaptchaImage"></image>
				</view>
			</view>

			<!-- <view class="flex-end">
        <view class="color-primary" style="margin-top: 25rpx">忘记密码</view>
      </view> -->
			<view class="mim">
				<switch class="sw" :checked='isshow'  type='checkbox' @change="switch2Change" >
				 记住密码
				</switch>
			</view>
			<view class="button-wrap">
				<button class="button-item uv-reset-button bg-primary color-f flex-center-center fs-34 fw-700"
					@click="handleSubmit()">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow:false,
				captchaEnabled: false, // 验证码是否启用
				captchaUrl: '', // 验证码图片地址
				username: 'zhoukai', // 登录用户名称
				password: '123456', // 登录密码
				code: '', // 验证码（验证码启用时必传）
				uuid: '', // 验证码UUID（验证码启用时必传）
				token:''
			}
		},
		onShow() {
			const roleType = uni.getStorageSync('roleType')
			if (!roleType) {
				uni.redirectTo({
					url: '/pages/login/role'
				})
				return
			}

			this.handleGetCaptchaImage()
		},
		methods: {
			switch2Change(e){
				console.log(e.detail.value);
			},
			// 获取图形验证码信息
			async handleGetCaptchaImage() {
				const result = await this.$api.getCaptchaImage()
				this.captchaEnabled = result.captchaEnabled
				if (this.captchaEnabled) {
					this.captchaUrl = 'data:image/gif;base64,' + result.img
					this.uuid = result.uuid
				} else {
					this.captchaUrl = ''
					this.uuid = ''
				}
				this.code = ''
			},
			// 登录
			async handleSubmit() {
				if (!this.username.trim()) return uni.showToast({
					title: '请输入您的账号',
					icon: 'none'
				})
				if (!this.password.trim()) return uni.showToast({
					title: '请输入您的密码',
					icon: 'none'
				})
				if (this.captchaEnabled && !this.code.trim()) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				const requestData = {
					username: this.username,
					password: this.password,
				}
				if (this.captchaEnabled) {
					requestData.code = this.code
					requestData.uuid = this.uuid
				}
				uni.showLoading({
					mask: true
				})
				 this.$api.postLogin(requestData).then(res=>{
					 if(res.code == 200){
						 console.log(res);
						 if(this.isshow){
						 	let requestData = {
						 		username: this.username,
						 		password: this.password,
						 	}
						 	uni.setStorageSync('userinfo',requestData)
						 }
						 this.token = res.token
						 this.$store.commit('SET_TOKEN', res.token)
						 uni.hideLoading()
						 // this.$api.getStaffInfo().then(res=>{
							//  const staffRole = staffInfoResult.roles[0]
							//  if (staffRole !== 'shengchan' && staffRole !== 'wuliu') {
							//  	this.$store.commit('SET_TOKEN', '')
							//  	this.handleGetCaptchaImage()
							//  	uni.showToast({
							//  		title: '没有权限，请联系平台',
							//  		icon: 'none'
							//  	})
							//  	return
							//  }
							//  this.$store.commit('SET_TOKEN', this.token)
							//  this.$store.commit('SET_STAFF_ROLE', staffRole)
							//  this.$store.commit('SET_STAFF_INFO', staffInfoResult.user)
							 
							//  uni.showToast({
							//  	title: '登录成功',
							//  	icon: 'none'
							//  })
							//  uni.reLaunch({
							//  	url: '/pages/index/index'
							//  })
							 
						 // })

					 }
					 
				 })
			},
		},
	}
</script>

<style lang="scss" scoped>
	.logo-image {
		width: 320rpx;
		height: 320rpx;
	}

	.list-container {
		margin: 62rpx 62rpx 0 58rpx;
	}

	.list-item {
		height: 185rpx;
		border-bottom: 2rpx solid #dcdcdc;
	}

	.input-wrap {
		margin-top: 34rpx;
		margin-left: -8rpx;
		margin-right: -8rpx;
	}

	.captcha-image {
		width: 200rpx;
		height: 76rpx;
	}

	.button-wrap {
		margin-top: 80rpx;
	}

	.button-item {
		width: 622rpx;
		height: 80rpx;
		border-radius: 14rpx;
	}
	.mim{
		margin-top: 20rpx;
		font-size: 30rpx;
		.sw{
			display: flex;
			align-items: center;
		}
	}
</style>